<template>
	<section>
		<!--工具条,查询和添加-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="query">
				<el-form-item>
					<el-input v-model="query.keyWords" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-select v-model="query.state" clearable placeholder="状态">
						<el-option label="待审核" value="0"></el-option>
						<el-option label="审核通过" value="1"></el-option>
						<el-option label="审核驳回" value="-1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getEmployee">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="listData" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column type="index" width="60"></el-table-column>
			<el-table-column prop="name" label="店铺名" width="100"></el-table-column>
			<el-table-column prop="state" label="状态" width="100">
				<template scope="scope">
					<span v-if="scope.row.state=='-1'" style="color: red">审核驳回</span>
					<span v-if="scope.row.state=='0'" style="color: #b8efff">待审核</span>
					<span v-if="scope.row.state=='1'" style="color: #44f886">审核通过</span>
				</template>
			</el-table-column>
			<el-table-column prop="tel" label="电话" width="160"></el-table-column>
			<el-table-column prop="registerTime" label="时间" width="140"></el-table-column>
			<el-table-column prop="address" label="地址" min-width="260"></el-table-column>
			<el-table-column prop="logo" label="Logo" min-width="160"></el-table-column>
			<el-table-column prop="admin_id" label="店主" min-width="100"></el-table-column>
			<el-table-column label="操作" width="260">
				<template scope="scope">
					<el-button style="background-color: #d53fff" size="small" @click="check(scope.$index, scope.row)">审核</el-button>
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条，批量删除和分页-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="query.pageSize" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

		<!--新增界面-->
		<el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="true">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="店铺名" prop="name">
					<el-input v-model="addForm.name" auto-complete="off" ></el-input>
				</el-form-item>
				<el-form-item label="电话" prop="tel">
					<el-input v-model="addForm.tel" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="地址" prop="address">
					<el-input v-model="addForm.address"></el-input>
				</el-form-item>
				<el-form-item label="Logo" prop="logo">
					<el-input v-model="addForm.logo"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-radio-group v-model="addForm.state">
						<el-radio class="radio" :label="1">在职</el-radio>
						<el-radio class="radio" :label="0">离职</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="店主" prop="parent_id">
					<el-input v-model="addForm.admin_id"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>


		<!--查看审核界面-->
		<el-dialog title="审核" :visible.sync="checkFormVisible" :close-on-click-modal="true">
			<el-form :model="checkForm" label-width="80px">
				<el-form-item label="店铺名称" prop="name">
					<el-input v-model="checkForm.name" auto-complete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="电话" prop="tel">
					<el-input v-model="checkForm.tel" auto-complete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="地址" prop="address">
					<el-input v-model="checkForm.address" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="Logo" prop="logo">
					<el-input v-model="checkForm.logo" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="驳回原因" prop="reason">
					<el-input type="textarea" :rows="5" placeholder="请输入驳回原因" v-model="checkForm.reason"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="checkFormVisible = false">取消</el-button>
				<el-button style="background-color: #b8efff" @click.native="reject" :loading="addLoading">驳回</el-button>
				<el-button type="success" @click.native="pass" :loading="addLoading">通过</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>

	export default {
		data() {
			return {
                listData:[], // 列表数据
                listLoading:false,
				sels:[], // 保存多选的选中项
				query:{ // 分页和高级查询
                    pageSize:5,
                    currentPage:1,
                    keyWords:'',
                    state:null,
				},
				total:0,
                addFormVisible:false, // 添加和修改弹出框是否显示
                checkFormVisible:false, // 审核弹出框是否显示
				addForm:{ // 添加和修改属性
                    name:"",
                    tel:"",
                    registerTime:"",
                    state:-1,
                    address:"",
                    logo:"",
                    admin_id:'',
				},
				// 审核弹出框
                checkForm:{
                    reason:"",
                },
                addFormRules:{ // 校验，用户名不能为空
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ]
				},
                addLoading:false, // 加载状态
			}
		},
		methods: {
		    /* 将多选的选中项保存到sels中 */
            selsChange(val) {
                this.sels = val;
			},

			/* 点击审核按钮 */
            check(i,row) {
				// 将数据展示出来，不允许修改
				this. checkForm = Object.assign({}, row);
				// 显示审核弹框
				this.checkFormVisible = true;
            },

			/* 审核通过 */
            pass() {
                let parameter = {
                    // 审查的对象id
                    shop_id:this.checkForm.id,
                    // 店铺的管理员ids
                    admin_id:this.checkForm.admin_id,
                }
				this.$http.post("shop/pass", parameter).then(res => {
                    if (res.data.success) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message.error("网络异常");
                    }
                    // 重新获取数据，刷新列表
                    this.loadListData();
                    // 关闭审核弹窗
                    this.checkFormVisible = false;
				})
			},

			/* 审核驳回 */
            reject() {
				if (!this.checkForm.reason) {
					// 提示填写驳回信息
					this.$message.error('请填写驳回信息');
					return;
				}
				// 组装返回参数
				let parameter = {
				    // 审查的对象id
					shop_id:this.checkForm.id,
					// 驳回原因
					content:this.checkForm.reason,
					// 店铺的管理员id
                    admin_id:this.checkForm.admin_id,
				}
				// 发送请求
				this.$http.post("/shop/noexamine",parameter).then(res => {
                    if (res.data.success) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message.error("网络异常");
                    }
                    // 重新获取数据，刷新列表
                    this.loadListData();
                    // 关闭审核弹窗
					this.checkFormVisible = false;
				})
			},

            /* 批量删除 */
            batchRemove() {
                let ids = this.sels.map(item => item.id);
                console.log(ids);
                console.log(typeof(ids));
                this.$confirm('是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.patch("http://localhost:8080/shop", ids).then(res => {
                        if (res.data.success) {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                        } else {
                            this.$message.error("网络异常");
                        }
                        // 重新获取数据，刷新列表
                        this.loadListData();
                    })
                })
			},

			/* 当前显示页数变化时，重新发送查询请求，获取新数据渲染页面 */
            handleCurrentChange(val) {
                this.query.currentPage = val;
                this.loadListData();
			},

			/* 查询列表数据 */
			loadListData() {
				this.$http.post("http://localhost:8080/shop",this.query).then(res => {
				    this.listData = res.data.data;
				    this.total = res.data.total;
				})
			},

			/* 状态拦以什么样的内容显示 */
            formatState(row, column) {
				return row.state == 1 ? "在职？" : row.state == 0 ? "离职？" : "你搞锤子？";
			},

			/* 高级查询 */
            getEmployee() {
                this.loadListData();
			},

			/* 点击添加按钮 */
            handleAdd() {
                // 清空表单
                this.addForm = {
                    name:"",
                    tel:"",
                    state:-1,
                    address:"",
                    logo:"",
                    admin_id:'',
				}
				// 显示弹出框
				this.addFormVisible = true;
			},

			/* 点击编辑按钮 */
            handleEdit(index, row) {
                // 回显数据
				this.addForm = Object.assign({}, row);
				// 显示弹出框
                this.addFormVisible = true;
			},

			/* 点击弹出框确认按钮，发送请求 */
            addSubmit() {
                this.$http.put("http://localhost:8080/shop", this.addForm).then(res => {
                    if (res.data.success) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message.error("网络异常");
                    }
                    // 重新获取数据，刷新列表
                    this.loadListData();
                    // 关闭弹出框
                    this.addFormVisible = false;
				})
			},

			/* 单个删除 */
            handleDel(i, row) {

                this.$confirm('是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.delete("http://localhost:8080/shop/" + row.id).then(res => {
                        if (res.data.success) {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
						} else {
                            this.$message.error("网络异常");
						}

                        console.log("当前页:" + Math.ceil(this.total/this.query.pageSize));
						// 重新获取数据，刷新列表
						this.loadListData();
                    })
                })
			},

		},
		mounted() {
			this.loadListData();
		},
		watch: {
            total(){  // 监听数据总条数，当页面总条数改变就触发改函数
				/* 当数据总条数等于当前页减一乘以当前页的时候，说明已经将当前页的删除完了，将当前页减一，并重新刷新页面 */
                if(this.total==(this.query.currentPage-1)*this.query.pageSize&& this.total!=0){
                    this.query.currentPage --;
                    this.loadListData()
                }
            }
		}
	}

</script>

<style scoped>

</style>